.null {
  margin-top: 6.25rem;
}

.items {
  @apply flex flex-wrap overflow-hidden;

  .item {
    @apply relative cursor-pointer mr-4;
    margin-bottom: 1.625rem;

    .img {
      @apply w-full relative rounded-lg text-xs overflow-hidden;

      .score {
        @apply absolute text-sm font-bold z-2;
        bottom: 0.6875rem;
        left: 0.625rem;
        font-family: OPPOSans;
        line-height: 1.125rem;
        color: #fdb525;
      }

      &::before {
        @apply absolute left-0 right-0 bottom-0 h-10 bg-linear-cover z-1;
        content: '';
      }

      &:hover > img {
        transition: all 0.3s;
        transform: scale(1.05);
      }

      &::after {
        @apply absolute text-white text-xs z-2;
        content: attr(data-txt);
        bottom: 0.6875rem;
        right: 0.625rem;
      }

      & img {
        width: 100% !important;
      }
    }

    .name {
      @apply w-full mt-3 text-base text-white;
    }

    .progress {
      @apply mt-2 flex h-5 items-center w-full;

      .img {
        @apply w-5 h-5 mr-1 shrink-0;
      }

      span {
        @apply text-xs text-c99;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .items {
    .item {
      .name {
        @apply text-sm;
        margin-top: 0.375rem;
      }

      .progress {
        @apply mt-1 text-xs whitespace-nowrap;

        .img {
          @apply h-4 w-4;
          margin-right: 0.125rem;
        }
      }
    }
  }
}
